<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="美食分类" prop="foodCategory">
                            <el-select v-model="condition.search.foodCategory"
                                       placeholder="美食分类">
                                <el-option
                                    v-for="item in shop_categories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="关键词" prop="q">
                            <el-input v-model="condition.search.q"
                                      placeholder="关键词"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="showFlag = !showFlag">切换显示</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div v-for="(item, index) in rowsData" :key="item.id" class="pics">
            <el-divider content-position="left" v-if="showFlag">
                {{ item.shopName }}
                <el-tag size="small" type="danger" @click="clickTagSearch(item.foodCategory)">{{ item.foodCategory }}</el-tag>
                <el-tag
                    v-for="tag in item.styleTagList"
                    :key="tag"
                    @click="clickTagSearch(tag)"
                    size="small">
                    {{ tag }}
                </el-tag>
            </el-divider>
            <el-row type="flex">
                <el-col :span="4">
                    <el-image :src="item.pic1GalleryUrl" :fit="item.fit" :preview-src-list="imgUrls"
                              class="pic"></el-image>
                </el-col>
                <el-col :span="4">
                    <el-image :src="item.pic2GalleryUrl" :fit="item.fit" :preview-src-list="imgUrls"
                              class="pic"></el-image>
                </el-col>
                <el-col :span="4">
                    <el-image :src="item.pic3GalleryUrl" :fit="item.fit" :preview-src-list="imgUrls"
                              class="pic"></el-image>
                </el-col>
                <el-col :span="4">
                    <el-image :src="item.pic4GalleryUrl" :fit="item.fit" :preview-src-list="imgUrls"
                              class="pic"></el-image>
                </el-col>
                <el-col :span="4">
                    <el-image :src="item.pic5GalleryUrl" :fit="item.fit" :preview-src-list="imgUrls"
                              class="pic"></el-image>
                </el-col>
                <el-col :span="4" v-if="showFlag">
                    <div class="operation">
                        <el-button type="success" icon="el-icon-edit" circle
                                   @click="showUpdateDialog(item)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="onDelete(item)"></el-button>
                        <el-button type="warning" icon="el-icon-lollipop" circle
                                   @click="onSwitch(item, index)"></el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 40]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="40%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="菜系分类">
                    <el-select v-model="addOrUpdateForm.foodCategory"
                               placeholder="美食分类">
                        <el-option
                            v-for="item in shop_categories"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风格标签" v-if="style_tags.length > 0">
                    <el-tag
                        v-for="item in style_tags"
                        :key="item.label"
                        :type="item.type"
                        size="small"
                        @click="clickStyleTag(item)"
                        :effect="item.effect">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="门店名称">
                    <el-input v-model="addOrUpdateForm.shopName"
                              placeholder="门店名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="update" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {delete5PicById, getGallery5PicByPage, getParamValue, update5Pic} from '@/api/api'

export default {
    name: "GalleryDp",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },

            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            rowsData: [],
            imgUrls: [],

            style_tags: [],

            // 门店分类
            shop_categories: [],

            // 切换显示
            showFlag: true,
        }
    },
    watch: {
        type: function (val, oldVal) {
            if (val) {
                this.type = val;
            }
        }
    },
    methods: {
        clickTagSearch(tag) {
            this.$set(this.condition.search, "q", tag)
            this.getData();
        },
        clickStyleTag(item) {
            if (item.effect === 'plain') {
                item.effect = 'dark'
            } else {
                item.effect = 'plain'
            }
            let ss = [];
            this.style_tags.forEach((item, index, arr) => {
                if (item.effect === 'dark') {
                    ss.push(item.label);
                }
            })
            if (ss.length > 0) {
                this.addOrUpdateForm.styleTags = ss.join(",");
            }
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);

            // 风格标签初始化
            this.style_tags.forEach((item, index, arr) => {
                item.effect = 'plain'
            })
            // 风格标签赋值
            if (this.addOrUpdateForm.styleTags) {
                let tt = this.addOrUpdateForm.styleTags.split(",");
                tt.forEach((item, index, arr) => {
                    for (let i = 0; i < this.style_tags.length; i++) {
                        if (this.style_tags[i].label == item) {
                            this.style_tags[i].effect = 'dark';
                            break;
                        }
                    }
                })
            }
        },
        update: function () {
            update5Pic(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onSwitch: function (row, index) {
            row.fit = row.fit === 'cover' ? 'contain' : 'cover';
            this.$set(this.rowsData, index, row);
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delete5PicById({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            getGallery5PicByPage(this.condition).then(data => {
                this.rowsData = data.body.rows;
                this.condition.total = data.body.total;

                this.rowsData.forEach((item, index, arr) => {
                    item.fit = 'cover';
                    if (item.pic1GalleryUrl) {
                        this.imgUrls.push(item.pic1GalleryUrl);
                    }
                    if (item.pic2GalleryUrl) {
                        this.imgUrls.push(item.pic2GalleryUrl);
                    }
                    if (item.pic3GalleryUrl) {
                        this.imgUrls.push(item.pic3GalleryUrl);
                    }
                    if (item.pic4GalleryUrl) {
                        this.imgUrls.push(item.pic4GalleryUrl);
                    }
                    if (item.pic5GalleryUrl) {
                        this.imgUrls.push(item.pic5GalleryUrl);
                    }
                })
            });
            this.getStyleTags();
            this.getShopCategories();
        },
        // 获取风格标签数组
        getStyleTags() {
            if (this.style_tags.length > 0) {
                return;
            }
            this.style_tags = [];
            getParamValue('gallery_style_tags').then(data => {
                let ss = data.body;
                if (ss) {
                    let tt = ss.split(",");
                    tt.forEach((item, index, arr) => {
                        this.style_tags.push(
                            {
                                type: '',
                                label: item,
                                effect: 'plain'
                            }
                        )
                    })
                }
            })
        },
        // 获取门店分类
        getShopCategories() {
            if (this.shop_categories.length > 0) {
                return;
            }
            this.shop_categories = [];
            getParamValue('food_shop_category').then(data => {
                let ss = data.body;
                if (ss) {
                    let tt = ss.split(",");
                    tt.forEach((item, index, arr) => {
                        this.shop_categories.push(
                            {
                                value: item,
                                label: item,
                            }
                        )
                    })
                }
            })
        }
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.el-button--mini.is-circle {
    padding: 0px !important;
}

.el-tag {
    cursor: default !important;
}

.el-tag:hover {
    cursor: pointer !important;
}

.operation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pics {
    width: 1200px;
}

.pic {
    width: 200px;
    height: 150px;
}
</style>
